<!doctype html>
<html lang="zh-CN">

<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap 的 CSS 文件 -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <link rel="shortcut icon" href="./images/icon.png">


  <title>油冷柜/Immersion Cooling BS-2207-B-01 V1.0</title>
</head>

<body>

  <div class="container">


    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <!-- <a class="navbar-brand" href="#">Navbar</a> -->

        <a class="navbar-brand" href="#">
          <!-- <img src="https://v5.bootcss.com/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top"> -->
          <img src="./images/icon.png" alt="" width="30px" height="24px">
          BAISHI
        </a>


        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">PRODUCT</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./contact.html">CONTACT</a>
            </li>

            <li class="nav-item">
              <a class="nav-link disabled">SHIP</a>
            </li>
          </ul>

        </div>
      </div>
    </nav>



    <!-- 内容 -->

    <h1>项目：油冷柜</h1>

    <div>主要负责人：洪帅</div>

    <div>项目成员： 小A、小B、小C</div>




    <div>
      <table class="table table-hover align-middle" onclick="TaskDetail()">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">分项任务</th>
            <th scope="col">分项负责人</th>
            <th scope="col">计划时间</th>
            <th scope="col">完成度</th>
            <th scope="col">完成时间</th>
            <th scope="col">项目操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>外观设计</td>
            <td>向前</td>
            <td>2022-01-01 到 2022-09-02</td>
            <td>

              <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#exampleModal">
                1/20
              </button>

            </td>
            <td></td>

            <td>

              <select class="form-select" aria-label="Default select example">
                <option value="1" selected>等待</option>
                <option value="2">进行中</option>
                <option value="3">完成</option>
                <option value="4">撤销</option>

              </select>

            </td>
          </tr>

          <tr id="AddTask">
            <th>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg"
                viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                  d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z" />
              </svg>
            </th>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>

              <button type="button" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#addTask">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                  class="bi bi-plus-circle" viewBox="0 0 16 16">
                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                  <path
                    d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
                </svg>
                添加任务
              </button>

            </td>
          </tr>

        </tbody>
      </table>



      <!-- 分项任务详情 -->
      <!-- Modal -->
      <div class="modal fade " id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">分项任务详情</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

              <table class="table align-middle">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">任务</th>
                    <th scope="col">计划时间</th>
                    <th scope="col">完成时间</th>
                    <th scope="col">任务操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>3D 模型设计</td>
                    <td>2022-07-03 到 2022-07-03</td>
                    <td>未完成</td>
                    <td>
                      <select class="form-select" aria-label="Default select example">
                        <option value="1" selected>等待</option>
                        <option value="3">完成</option>
                        <option value="4">撤销</option>
                      </select>
                    </td>
                  </tr>

                  <tr>
                    <th scope="row">1</th>
                    <td>3D 模型设计</td>
                    <td>2022-07-03 到 2022-07-03</td>
                    <td>未完成</td>
                    <td>
                      <select class="form-select" aria-label="Default select example">
                        <option value="1" selected>等待</option>
                        <option value="3">完成</option>
                        <option value="4">撤销</option>
                      </select>
                    </td>
                  </tr>


                </tbody>
              </table>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>



      <!-- 添加任务 -->
      <!-- Modal -->
      <div class="modal fade " id="addTask" tabindex="-1" aria-labelledby="addTaskLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="addTaskLabel">添加任务</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

              <div class="mb-3">
                <label for="exampleFormControlInput1" class="form-label">分项任务名称</label>
                <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="分项任务名称">
              </div>

              <div>

                选择分项负责人

                <select class="form-select" aria-label="Default select example">
                  <option value="1" selected>小A</option>
                  <option value="2">小B</option>
                  <option value="3">小C</option>
                  <option value="4">小D</option>
  
                </select>


              </div>

              


              

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">提交添加</button>
            </div>
          </div>
        </div>
      </div>







      <!-- 内容 end -->


      <!-- <div style="margin-top: 60px;">
        <hr />
      </div> -->


      <!-- FOOTER -->
      <footer style="margin-top: 60px; margin-bottom: 30px;">


        <div class="row">

          <div class="col-sm-12 col-md-6">

            <P class="lead">CONTACT</P>
            <P>PHONE：(+86) 010-6957 6951</P>
            <P>EMAIL：cxb@bai-shi.com</P>

          </div>

          <!-- <div class="col-sm-12 col-md-6">

            <P class="lead">CONTACT</P>
            <P>PHONE：(+86) 010-6957 6951</P>
            <P>EMAIL：cxb@bai-shi.com</P>


          </div> -->

        </div>

        <p>&copy; 2022 BaiShiZhiHui Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
      </footer>


    </div><!-- /.container -->


    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
    <script src="./js/bootstrap.bundle.min.js"></script>
    <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>

    <script>

      function AddTask() {



      }

    </script>



</body>

</html>